Getting started with Angular Material

In this tutorial, we shall see how to integrate and use angular material in an angular project.

Create a new angular project

First lets create an application using the below command.

ng new angular-material-tutorials

Add angular material module to the project

Once the application is created then integrate the @angular/material module to angular application using

ng add @angular/material

During installation of angular material, Specify the theme, and select yes options for both Set up global Angular Material typography styles and Set up browser animations for Angular Material.

Create seperate Module for angular material module

Create a module with the following angular cli command to hold all the material components in a single module and import them where ever its needed.

ng g m angular-material

Open the angular-material.module.ts file and import the necessary material modules to the file and then import and export the modules.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';

const modules = [
CommonModule, MatButtonModule];
@NgModule({
declarations: [],
imports: [...modules],
exports: [...modules]
})
export class AngularMaterialModule { }

Here we have included the MatButtonModule and included it to imports and exports array.

Add AngularMaterialModule to AppModule

Inclued the AngularMaterialModule in the app.module.ts file. Open the app.module.ts file and modify the code as below.

import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material/angular-material.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    AngularMaterialModule,
    HammerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here I had added HammerModule for support for gesture and BrowserAnimationsModule for supporting angular material modules.

Use Angular material button in AppComponent

Now open the app.component.html file and then modify add the material buttons to it.

<section>
  <div>
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
  </div>
</section>

Now run your application using

ng serve --o

Adding material card module

Let's add the material card to the component. Open the angular-material.module.ts file and refer the MatCardModule. Then import and export the module. Now your code looks like below.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

const modules = [
  CommonModule, MatButtonModule, MatCardModule];
@NgModule({
  declarations: [],
  imports: [...modules],
  exports: [...modules]
})
export class AngularMaterialModule { }

Use material card in AppComponent

Open the app.component.html file and modify the code as below.

<section>
  <div>
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
  </div>

  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
        bred for hunting.
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
</section>

Open the app.component.css or app.component.scss file and add the following style.

.example-card {
    max-width: 400px;
  }
  
  .example-header-image {
    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
    background-size: cover;
  }

Here I have created a card by refering to the material documentation link.

Adding material card module

Let's add the menubar to the application. For this we need to import the MatMenuModule to our application. Let's open the angular-material.module.ts file and import the MatMenuModule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';

const modules = [
  CommonModule, MatButtonModule, MatCardModule, MatMenuModule];
@NgModule({
  declarations: [],
  imports: [...modules],
  exports: [...modules]
})
export class AngularMaterialModule { }

Use material card in AppComponent

Now open the app.component.ts file and modify the code as below.

<header>
  <button mat-button>Home</button>
  <button mat-button [matMenuTriggerFor]="aboveMenu">Products</button>
  <mat-menu #aboveMenu="matMenu" yPosition="above">
    <button mat-menu-item>Product 1</button>
    <button mat-menu-item>Product 2</button>
  </mat-menu>

  <button mat-button [matMenuTriggerFor]="belowMenu">Category</button>
  <mat-menu #belowMenu="matMenu" yPosition="below">
    <button mat-menu-item>Category 1</button>
    <button mat-menu-item>Category 2</button>
  </mat-menu>

  <button mat-button>Contact</button>
</header>

<section>
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
        bred for hunting.
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
</section>

Run the application using the below command.

ng serve --o

You will see the output as below.

That's the way to use the angular material module. You can refer the official document of angular material by clicking on the link.